<template>
  <div class="my-packge">
    <x-header>我的钱包<a slot="right"></a></x-header>
    <tab :line-width="1" custom-bar-width="70px">
      <tab-item :selected="i===0" v-for="(item,i) in tabList" :key="i" @on-item-click="onItemClick">{{item}}</tab-item>
    </tab>
    <div class="money-box" v-for="(item,i) in moneyList[activeNum]" :key="i">
      <img class="img" :src="item.imgUrl" alt="">
      <span class="money-name">{{item.name}}</span>
      <span class="money-num">¥ {{item.cash||0}}</span>
    </div>
    <x-button @click.native="$router.push('/walletcharge')" class="btn" v-show="activeNum===0" type="primary">充值</x-button>
    <x-button @click.native="$router.push('/submitpage')" class="btn">提现</x-button>
    <div class="btn-to-rechargeRecharge">
      <span style="color:#EFA79B;" @click="$router.push(`/rechargerecords/${activeNum}`)">{{activeNum===0?'充值记录':'收益记录'}}</span>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import {
  XHeader,
  Tab,
  TabItem,
  XButton
} from 'vux';
const IndexStore = namespace('list');

@Component({
  components: {
    XHeader,
    Tab,
    XButton,
    TabItem
  }
})
export default class Wallet extends Vue {
  @IndexStore.Action getMyObtainMoney;
  @IndexStore.State myObtainMoney;
  activeNum = 0
  moneyList = [
    [
      { imgUrl: '../../static/recharge.png', name: '我的账户', cash: '' }
    ],
    [
      { imgUrl: '../../static/money.png', name: '我的收益', cash: '' }
    ]
  ]
  tabList = ['充值账户', '收益账户']
  onItemClick (index) {
    this.activeNum = index
  }
  created () {
    const params = {
      _id: this.id
    }
    window.localStorage.getItem('loginInfo') && this.getMyObtainMoney(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      }
    })
  }
}
</script>
<style lang="less">
  .my-packge {
    .btn {
      width: 95%;
      color: #ffffff;
      background-color: #EFA79B;
    }
    .btn-to-rechargeRecharge {
      width: 95%;
      margin: 0 auto;
      height: 44px;
      line-height: 44px;
      text-align: right;
    }
    .money-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;
      .money-name {
        margin: 10px 0;
        font-size: 14px;
        color: #666666;
      }
      .money-num {
        font-size: 24px;
        font-weight: bold;
        color: #000000;
      }
    }
    .img {
      width: 60px;
    }
    .weui-btn:after {
      content: initial;
    }
  }
</style>
